<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>零食儿超市</title>
    <script src="static/js/axios.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            outline: none;
        }

        body {
            background: linear-gradient(45deg, #fbda61, #ff5acd);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .shell,
        form {
            position: relative;
        }

        .shell {
            display: flex;
            justify-content: center;
        }

        form {
            width: 562px;
            height: 520px;
            background-color: #fff;
            box-shadow: 0px 15px 40px #b6354e;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #img-box {
            width: 330px;
            height: 520px;
        }

        #img-box img {
            height: 100%;
            margin-left: -175px;
            border-radius: 20px;
        }

        #form-body {
            width: 320px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        #welcome-lines {
            width: 100%;
            text-align: center;
            line-height: 1;
        }

        #w-line-1 {
            color: #7f7f7f;
            font-size: 50px;
        }

        #w-line-2 {
            color: #9c9c9c;
            font-size: 30px;
            margin-top: 17px;
        }

        #input-area {
            width: 100%;
            margin-top: 40px;
        }

        .f-inp {
            padding: 13px 25px;
            border: 2px solid #6e6d6d;
            line-height: 1;
            border-radius: 20px;
            margin-bottom: 15px;
        }

        .f-inp input {
            width: 100%;
            font-size: 14px;
            padding: 0;
            margin: 0;
            border: 0;
        }

        .f-inp input::placeholder {
            color: #b9b9b9;
        }

        #submit-button-cvr {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        #submit-button {
            display: block;
            width: 100%;
            color: #fff;
            font-size: 14px;
            margin: 0;
            padding: 14px 40px;
            border: 0;
            background-color: #f5506e;
            border-radius: 25px;
            line-height: 1;
            cursor: pointer;
        }

        #forgot-pass {
            text-align: center;
            margin-top: 10px;
        }

        #forgot-pass a {
            color: #868686;
            font-size: 12px;
            text-decoration: none;
        }

        .container {
            position: fixed;
            top: 15%;
            right: 800px;
            transform: translateY(-50%);
        }

        .btn {
            padding: 50px 50px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        .container a{
            font-size: 36px;
        }

    </style>
</head>

<body>
<div class="shell">
    <div id="img-box">
        <img src="static/image/a.png" alt="">
    </div>
    
    <div class="container">
        <!-- <button class="btn"><span style="font-size:xx-large; color: black;">后台网址</span></button> -->
        <a href="static/backend/login.html">后台管理员入口</a>
    </div>
    
    <form>
        <div id="form-body">
            <div id="welcome-lines">
                <div id="w-line-1">你好！</div>
                <div id="w-line-2">欢迎回来</div>
            </div>
            <div id="input-area">
                <div class="f-inp">
                    <input id="username" name="username" type="text" value="xiaoming" placeholder="Email Address">
                </div>
                <div class="f-inp">
                    <input id="password" name="password" type="password" value="123456" placeholder="Password">
                </div>
                <label>
                    <input type="checkbox" name="remember" id="remember">
                    <span>记住我</span>
                </label>
            </div>
            <div id="submit-button-cvr">
                <button type="button" id="submit-button">登录</button>
            </div>
            <div>
                <a href="register.html">注册</a>
            </div>
        </div>
    </form>
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/demo.js"></script>
    <script>
        $(function (){
            var name = getCookieValue("username")
            var pwd = getCookieValue("password")
            if(name && pwd){
                axios({
                    url: 'http://localhost:8080/snack-sale/login',
                    method: 'GET'
                }).then(result => {
                    if(result.data.code === 1){
                        window.location.href = "index.html"
                    }
                }).catch(error => {
                    console.log(error)
                })
            }
        })

        document.querySelector('button').addEventListener('click', ()=>{
            const username = document.querySelector('#username').value
            const password = document.querySelector('#password').value
            const remember = document.querySelector('#remember').checked
            
            axios({
                url: 'http://localhost:8080/snack-sale/login',
                method: 'POST',
                data: {
                    username,
                    password,
                    remember
                }
            }).then(result => {
                if(result.data.code === 1){
                    window.location.href = "http://localhost:8080/snack-sale/index.html"
                }
            }).catch(error => {
                console.log(error)
            })
        })
    </script>
</div>

<!-- <script>
    document.querySelector('.container .btn').addEventListener('click', function(){
        location.href='static/backend/login.html'
    })
</script> -->
</body>

</html>